<template>
	<view>
		<view class="b-form-list">
			<view class="add-button-list" v-if="dataList.length == 0">
				<view class="textarea border-null" v-if="onlyShow == false"> 
					<textarea  class="in-textarea" maxlength="-1" placeholder="请输入内容" @blur="inputTextarea" fixed="false" ></textarea>
				</view>
			</view>
			<view class="add-button-list" v-for="(item,index) in dataList" :key="index" :class="(onlyShow==true)?'border-null':''">
				<view class="top-title flex align-center" v-if="onlyShow == false">
					<view class="left">{{index+1}}、{{item.title?item.title:''}}</view>
					<view class="ope-list-right">
						<view class="right-sel" @tap="delItem(index)">删除</view>
						<view class="right-sel" v-if="index < (dataList.length -1)" @tap="moveType(index,'down')">下移</view>
						<view class="right-sel" v-if="index > 0" @tap="moveType(index,'up')">上移</view>
						<view class="right-sel" v-if="index > 0" @tap="moveType(index,'top')">置顶</view>
					</view>
				</view>
				<view class="textarea" v-if="item.type == 'textarea'" :class="(onlyShow==true)?'border-null':''">
					<textarea  v-if="onlyShow == false" class="in-textarea" fixed="false" maxlength="-1" placeholder="请输入内容" v-model="item.content"></textarea>
					<view v-else>
						{{item.content}}
					</view>
				</view>
				<view class="big_image" v-if="item.type == 'big_image'">
					<!-- <image v-if="onlyShow == false" :src="item.content.value" mode="aspectFit" class="bigimage-src" @tap.stop="showImage(item.content.value)"> -->
					<image  :src="item.content.value" mode="widthFix" @error="loadImageError" :data-index="index"  class="bigimage-src" @tap.stop="showImage(item.content.value)">
				</view>
				<view class="small_image" v-if="item.type == 'small_image'">
					<wzf-image-upload :dataType="0"  max="9" mediaType="image" chooseNum="9" v-if="onlyShow == false"
					 @chooseSuccess="chooseSuccess" @imgDelete="chooseDelete" v-model="item.content.value" :index="index"></wzf-image-upload>
					 <wzf-image-upload :dataType="0"  max="9" mediaType="image" chooseNum="9" v-else
					   v-model="item.content.value" :index="index" :remove="false" :add="false"></wzf-image-upload>
				</view>
				<view class="video" v-if="item.type == 'video'">
					<video class="myVideo" :src="item.content.value" v-if="!item.content.valueError" @error="loadVideoError" :data-index="index" controls></video>
					<image class="myVideo" :src="item.content.value" v-if="item.content.valueError"></image>
				</view>
				<view class="audio" v-if="item.type == 'audio'">
					<view @tap="playAudio(index)"> 
						<view class="audio-tip" v-if="onlyShow == false">已录制音频{{item.content.reDate}}秒，点击查看</view>
						<view class="audio-tip" v-else>已上传录音{{item.content.reDate}}秒，点击查看</view>
					</view>
				</view>
				<view class="address" v-if="item.type == 'address'">
					<view>
						<view class="address-tip" @tap="openMap(item)"><text class="iconfont icon-weizhi"></text>{{item.content.value}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="sel-form" @touchmove.stop.prevent="moveHandle"   v-if="show_more == true">
			<view class="mask-show" @tap.stop="show_more = false" ></view>
			<view class="iconfont icon-guanbi iconfont-close" @tap.stop="show_more = false"></view>
			<view class="shuxian"></view>
			<view class="diy-form">
				<view class="title">请选择你要添加的项目</view>
				<view class="scroll">
					<scroll-view class="scroll-view"  scroll-y="true" >
						<view v-for="(item,index) in moreList" :key="index" class="item-parent" @tap.stop="clickButton(index,'more')">
							<view class="item-parent-title">{{item.title}}</view>
							<view  class="item-parent-desc">{{item.desc}}</view>
						</view>
						<view class="zhanwei"></view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view class="sel-button flex align-center" v-if="onlyShow == false"> 
			<view class="button-list" v-for="(item,index) in buttonList" :key="index" @tap="clickButton(index)">
				<text class="iconfont text-center d-inline-block w-100" :class="item.icon"></text>
				<text class="text-title text-center d-inline-block w-100">{{item.title}}</text>
			</view>
		</view>
		<sound-recording ref="sound_recording" maximum="60" :showTop="showRecordTop" :show="showRecordStatus" @confirm="recordConfirm" @cancel="recordCancel"></sound-recording>
		<w-compress ref='wCompress' />	
	</view>
</template>

<script>
	import Upload from "@/utils/fileupload/upload.js";
	import wzfImageUpload from '@/components/wzf-image-upload/wzf-image-upload.vue';
	import soundRecording from '@/components/sound-recording/sound-recording.vue';
	import WCompress from '@/components/w-compress/w-compress.vue';
	export default {
		name:'add-sel-button',
		components:{
			wzfImageUpload,
			soundRecording,
			WCompress
		},
		props:{
			onlyShow:{
				type:Boolean, //仅仅作为显示
				default:false
			}
		},
		data() {
			return {
				show_more:false,
				showRecordStatus:false,
				showRecordIndex:-1,
				uploadFileListLog:[],
				showRecordTop:true,
				moreList:[
					{
						type:'address',
						title:'+位置',
						desc:'添加位置信息，访客可方便查看地址',
					}
				],
				dataList:[
					
				],
				buttonList:[
					{
						type:'textarea',
						icon:'icon-wenzi',
						title:'文字'
					},
					{
						type:'big_image',
						icon:'icon-tupian',
						title:'大图'
					},
					{
						type:'small_image',
						icon:'icon-xiaotu',
						title:'小图'
					},
					{
						type:'video',
						icon:'icon-shipin',
						title:'视频'
					},
					{
						type:'audio',
						icon:'icon-luyin',
						title:'录音'
					},
					{
						type:'more',
						icon:'icon-gengduo',
						title:'更多'
					}
				]
			}
		},
		methods: {
			loadImageError(e)
			{
				var img = this.$api.getErrorImage('imageBig')
				var dataset = e.currentTarget.dataset;
				if(dataset.index)
				{
					this.dataList[dataset.index].content.value = img;
				}
			},
			loadVideoError(e)
			{
				var img = this.$api.getErrorImage('video')
				var dataset = e.currentTarget.dataset;
				if(dataset.index)
				{
					this.dataList[dataset.index].content.value = img;
					this.dataList[dataset.index].content.valueError = true; 
				}
			},
			openMap(item){
				var content = item.content?item.content:'';
				if(content)
				{
					this.$api.openLocation(content.lat,content.lng,{
						address:content.value?content.value:'' 
					});
				}
			},
			inputTextarea(e){
				var value = e.detail.value;
				if(value)
				{
					var obj = {
						type:'textarea',
						title:'文字',
						content:value,
					};
					this.dataList.push(obj);
				}
			},
			initDataList(initList){
				var that = this;
				var dataList = [];
				var uploadFileListLog = that.uploadFileListLog;
				var errorImage = this.$api.getSystemConfig('errorImage');
				var errorImageBse = this.$api.getSystemConfig('errorImageBse');
				for(var key in errorImage)
				{
					var md5Name = that.$api.getMd5Name(errorImage[key],false);
					that.uploadFileListLog[md5Name] = errorImageBse[key];
				}
				initList.forEach(item=>{
					//console.log(item)
					switch(item.type)
					{
						case 'big_image':
						case 'video':
						case 'audio':
							var md5Name = that.$api.getMd5Name(item.content.value,false);
							uploadFileListLog[md5Name] = item.content.qnValue?item.content.qnValue:'';
							break;
						case 'small_image':
							var value = item.content.value?item.content.value:[];
							if(value.length > 0)
							{
								for(var i=0;i<value.length;i++)
								{
									var md5Name = that.$api.getMd5Name(value[i],false);
									uploadFileListLog[md5Name] = item.content.qnValue[i]?item.content.qnValue[i]:'';
								}
							}
							break;
					}
				})
				that.uploadFileListLog = uploadFileListLog;
				that.dataList = initList;
			},
			async clickButton(index,type){
				var that = this;
				if(type == 'more')
				{
					var info = that.moreList[index];
				}else{
					var info = that.buttonList[index];
				}
				var dataList = that.dataList;
				var obj = '';
				switch(info.type)
				{
					case 'textarea':
						if(dataList.length < 1)
						{
							return ;//默认已经显示一个输入框了
						}
						obj = {
							type:'textarea',
							title:'文字',
							content:'',
						};
						break;
					case 'big_image':
						var img = await Upload.chooseImg({
							count:9
						});
						if(img.length > 0)
						{
							var imgList = [];
							img.forEach(function(item,index){
								imgList.push(item.path);
							})
							this.imgCompress(imgList).then(res=>{
								res.forEach(item=>{
									obj = {
										type:'big_image',
										title:'大图',
										content:{
											value:item,
											qnValue:''
										}
									};
									dataList.push(obj);
								})
								that.dataList = dataList;
								
							}).catch(err=>{
								console.log('error',err)
							});
						}
						break;
					case 'small_image':
						var img = await Upload.chooseImg({
							count:9
						});
						if(img.length > 0)
						{
							var imgList = [];
							img.forEach(function(item,index){
								imgList.push(item.path);
							})
							this.imgCompress(imgList).then(res=>{
								if(res.length > 0)
								{
									obj = {
										type:'small_image',
										title:'小图',
										content:{
											value:res,
											qnValue:[]
										}
									};
									dataList.push(obj);
									that.dataList = dataList;
								}
							}).catch(err=>{
								console.log('error',err)
							});
							
						}
						break;
					case 'video':
						var video = await Upload.chooseVideo();
						if(video.tempFilePath)
						{
							if(video.duration > 60)
							{
								that.$api.msg('只能添加60秒以内的视频');
								return ;
							}
							obj = {
								type:'video',
								title:'视频',
								content:{
									value:video.tempFilePath,
									qnValue:'',
								}
							};
						}
						break;
					case 'audio':
						that.$api.checkScopeRecord(function(e){
							that.$refs.sound_recording.initAudioSrc({});
							that.showRecordStatus = true;
							that.showRecordIndex = -1;
						})
						break;
					case 'more':
						that.show_more = true;
						break;
					case 'address':
						that.$api.chooseLocation(function(e){
							if(e.address)
							{
								that.show_more = false;
								obj = {
									type:'address',
									title:'位置',
									content:{
										value:(e.address?e.address:'')+(e.name?e.name:''),
										lat:e.latitude,
										lng:e.longitude,
										map_type:'tencent'
									}
								};
								dataList.push(obj);
								that.dataList = dataList;
							}
						})
						break;				
				}
				if(obj)
				{
					dataList.push(obj);
					that.dataList = dataList;
				}
				
			},
			async imgCompress(tempFilePaths, type) { //type 0 为图片 1为视频
				this.$api.loadingMsg('正在压缩图片');
				var that = this;
				let compressImgs = [];
				let results = [];
				return new Promise((resolve, reject) => {
					// #ifndef H5
					that.$refs.wCompress.start(tempFilePaths,{
					}).then(res=>{
						uni.hideLoading();
						resolve(res);
					}).catch(err=>{
						uni.hideLoading();
						that.$api.msg('压缩图片失败');
						/* console.log('compressImgs error',err)
						reject(err); */
					})
					// #endif
				})
			},
			playAudio(index){
				if(this.onlyShow == true)
				{
					this.showRecordTop = false; //如果是只作为显示的话 那么不需要显示完成
				}
				this.showRecordIndex = index;
				var info = this.dataList[index];
				if(info && info.content.value)
				{
					this.$refs.sound_recording.initAudioSrc(info.content);
					this.showRecordStatus = true;
				}
			},
			//录音界面点击完成回调
			recordConfirm(e){
				var that = this;
				if(that.showRecordIndex == -1)
				{
					if(e.path)
					{
						var obj = {
							type:'audio',
							title:'录音',
							content:{
								value:e.path,
								qnValue:'',
								reDate:e.reDate,
								min:e.min,
								sec:e.sec
							}
						};
						that.dataList.push(obj);
						that.$forceUpdate();
					}
				}else{
					var index = that.showRecordIndex;
					if(index < 0)
					{
						that.$api.msg('未获取到要操作的录音数据');return ;
					}
					if(e.path)
					{
						var info = that.dataList[index];
						info.content.value = e.path;
						info.content.reDate = e.reDate;
						info.content.min = e.min;
						info.content.sec = e.sec;
						that.dataList[index] = info;
						that.$forceUpdate();
					}else{
						that.resetDataList(index); //没获取到语音直接把这个代码块删除
					}
				}
			},
			recordCancel(){
				this.showRecordStatus = false;
			},
			resetDataList(delIndex)
			{
				var dataList = this.dataList;
				var newDataList = [];
				for(var i=0;i<dataList.length;i++)
				{
					if(i != delIndex)
					{
						newDataList.push(dataList[i]);
					}
				}
				this.dataList = newDataList;
				this.$forceUpdate();
			},
			//上移下移
			moveType(index,type){
				var dataList = this.dataList;
				//down下移 up上移
				if(type == 'down')
				{
					var nowInfo = dataList[index];
					var nextInfo = dataList[index+1]?dataList[index+1]:{};
					if(!nextInfo){
						this.$api.msg('已经是最后一个了');return false
					}
					dataList[index] = nextInfo;
					dataList[index+1] = nowInfo;
				}else if(type == 'up')
				{
					var nowInfo = dataList[index];
					var upInfo = dataList[index-1]?dataList[index-1]:{};
					if(!upInfo){
						this.$api.msg('已经是第一个了');return false
					}
					dataList[index] = upInfo;
					dataList[index-1] = nowInfo;
				}else if(type == 'top')
				{
					var nowInfo = dataList[index];
					dataList.splice(index,1);
					dataList.unshift(nowInfo);
				}
				this.dataList = dataList;
				this.$forceUpdate();
			},
			//删除某个元素
			delItem(index){
				var _this = this;
				uni.showModal({
					content:'确认删除',
					success(res) {
						if(res.confirm == true)
						{
							_this.resetDataList(index);
						}
					}
				})
			},
			//选择图片视频之类的
			chooseSuccess(tempFilePaths, type,index) {
				var thisDatas = []
				tempFilePaths.forEach(item => {
					thisDatas.push(item)
				})
				this.dataList[index].content.value.push(...thisDatas)
				this.$forceUpdate();
			},
			//删除回调
			chooseDelete(e){
				//console.log('tempFilePaths',e,this.dataList); 
				if(e.tempFilePaths.length <1)
				{
					this.resetDataList(e.index);
				}else{
					this.dataList[e.index].content.value = e.tempFilePaths;
					this.$forceUpdate();
				}
			},
			showImage(url){
				this.$api.showImage([url]);
				
			},
			
			//获取添加的内容
			async getContent(){
				var _this = this;
				var checkRes = false,uploadRes = false;
				var checkRes = _this.checkFormData();
				if(checkRes < 1)
				{
					return [];
				}
				var uploadRes = await _this.uploadFile(); //上传文件
				//console.log('uploadRes',uploadRes,this.uploadFileListLog);
				if(uploadRes == false)
				{
					return [];
				}
				var dataList = _this.dataList;
				var uploadFileListLog = _this.uploadFileListLog;
				//console.log(dataList);
				//console.log(uploadFileListLog);
				var returnData = [];
				var haveError = false;
				for(var i=0;i<dataList.length;i++)
				{
					var item = dataList[i];
					if(item.type == 'big_image' || item.type == 'video')
					{
						var sUrl = item.content.value?item.content.value:'';
						if(sUrl)
						{
							var md5Name = _this.$api.getMd5Name(sUrl,false);
							if(uploadFileListLog[md5Name])
							{
								item.content.qnValue = uploadFileListLog[md5Name];
							}else{
								_this.$api.msg('第'+(i+1)+'个'+item.title+'项，未上传');
								haveError = true;
								break ;
							}
						}else{
							item.content.qnValue = '';
						}
					}
					else if(item.type == 'small_image')
					{
						var valueList = item.content.value?item.content.value:[];
						var uploadList = [];
						if(valueList.length > 0)
						{
							var uploadHaveError = false;
							for(var y=0;y<valueList.length;y++)
							{
								var md5Name = _this.$api.getMd5Name(valueList[y],false);
								if(uploadFileListLog[md5Name])
								{
									uploadList.push(uploadFileListLog[md5Name])
								}else{
									uploadHaveError = true;
									var text = (item.type == 'small_image')?'图片':'视频';
									_this.$api.msg('第'+(i+1)+'个'+item.title+'项，第'+(y+1)+'个'+text+'未上传');
									break;
								}
							}
							if(uploadHaveError == true)
							{
								haveError = true; //数据错误 直接终止
								break;
							}
						}
						item.content.qnValue = uploadList;
					}
					else if(item.type == 'audio')
					{
						var fileInfo = item.content.value?item.content.value:'';
						if(fileInfo)
						{
							var md5Name = _this.$api.getMd5Name(fileInfo,false);
							if(uploadFileListLog[md5Name])
							{
								item.content.qnValue = uploadFileListLog[md5Name];
							}else{
								_this.$api.msg('第'+(i+1)+'个'+item.type+'项，未上传');
								haveError = true;
								break ;
							}
							
						}else{
							item.content.qnValue  = '';
						}
					}
					dataList[i] = item;
					returnData[i] = item;
				}
				if(haveError)
				{
					return [];
				}
				//console.log(returnData)
				_this.dataList = dataList;
				return returnData;
			},
			//检测表单里面的填写内容
			checkFormData(){
				var _this = this;
				var dataList = _this.dataList;
				var errorText = '';
				for(var i=0;i<dataList.length;i++)
				{
					var item = dataList[i];
					if(item.type == 'textarea')
					{
						if(item.content == '')
						{
							errorText = '第'+(i+1)+'项'+item.title+'内容不能为空';
							break;
						}
					}else if(item.type == 'big_image')
					{
						if(item.content.value == '')
						{
							errorText = '第'+(i+1)+'个'+item.title+'不能为空';
							break;
						}
					}else if(item.type == 'small_image')
					{
						if(item.content.value.length < 1)
						{
							errorText = '第'+(i+1)+'个'+item.title+'不能为空';
							break;
						}
					}else if(item.type == 'video')
					{
						if(item.content.value == '')
						{
							errorText = '第'+(i+1)+'个'+item.title+'不能为空';
							break;
						}
					}else if(item.type == 'audio')
					{
						if(item.content.value == '')
						{
							errorText = '第'+(i+1)+'个'+item.title+'不能为空';
							break;
						}
					}else if(item.type == 'address')
					{
						if(item.content.value == '')
						{
							errorText = '第'+(i+1)+'个'+item.title+'不能为空';
							break;
						}
					}
				}
				//console.log(this.resultData)
				if(errorText)
				{
					_this.$api.msg(errorText);
					return -1;
				}
				return dataList.length;
			},
			getFormDataText(){
				var _this = this;
				var dataList = _this.dataList;
				var str = '';
				for(var i=0;i<dataList.length;i++)
				{
					var item = dataList[i];
					if(item.type == 'textarea')
					{
						if(item.content)
						{
							str = str?str +',' +item.content:item.content;
						}
					}
				}
				return str;
			},
			//上传文档里面的内容
			async uploadFile(){
				var that = this;
				var resData = that.dataList;
				//console.log('uploadFileListLog',this.uploadFileListLog)
				try{
					if(resData.length > 0)
					{
						var uploadStatus = true;
						for(var i=0;i<resData.length;i++)
						{
							var item = resData[i];
							if(item.type == 'small_image' || item.type == 'big_image')
							{
								if(item.type == 'small_image')
								{
									var imageList = item.content.value;
								}else if(item.type == 'big_image')
								{
									var imageList = item.content.value?[item.content.value]:[];
								}
								if(imageList.length > 0)
								{
									var uploadStatus = await that.uploadImgList(imageList,i);
								}
							}else if(item.type == 'video')
							{
								var videoList = item.content.value?[item.content.value]:[];
								if(videoList.length > 0)
								{
									var uploadStatus = await that.uploadVideoList(videoList,i);
								}
							}else if(item.type == 'audio')
							{
								var fileInfo = item.content.value?item.content.value:'';
								//console.log(fileInfo)
								if(fileInfo)
								{
									var uploadStatus = await that.uploadFileInfo(fileInfo,i);
								}
							}
							if(uploadStatus == false)
							{
								break;
							}
						}
					}
				}catch(e){
					that.$api.msg('捕获异常:上传文件失败');
					uni.hideLoading();
					return false;
				}
				if(uploadStatus == false)
				{
					return false;
				}
				return true;
			},
			async uploadFileInfo(fileInfo,itemIndex){
				
				fileInfo = fileInfo?fileInfo:'';
				var uploadStatus = true;
				if(fileInfo)
				{
					var md5Name = this.$api.getMd5Name(fileInfo,false);
					if(!this.uploadFileListLog[md5Name])
					{
						var fileRes = await Upload.uploadFileToQiniu([
							{
								name:fileInfo,
								path:fileInfo
							}
						])
						//console.log(fileRes)
						uni.hideLoading()
						if(fileRes.list && fileRes.list.length > 0)
						{
							this.uploadFileListLog[md5Name] = fileRes.list[0];
						}else{
							uploadStatus = false;
							this.$api.msg('第'+(itemIndex+1)+'个内容项，文件上传失败');
						}
						
					}
				}
				return uploadStatus;
			},
			async uploadVideoList(videoList,itemIndex){
				videoList = videoList?videoList:[];
				var uploadStatus = true;
				if(videoList.length > 0)
				{
					var newVideoArr = [];
					for(var i=0;i<videoList.length;i++)
					{
						var md5Name = this.$api.getMd5Name(videoList[i],false);
						if(!this.uploadFileListLog[md5Name])
						{
							//上传视频
							var videoRes = await Upload.uploadVideoToQiniu([
								{
									tempFile:{
										name:videoList[i],
									},
									tempFilePath:videoList[i]
								}
							])
							if(videoRes.list && videoRes.list.length > 0)
							{
								this.uploadFileListLog[md5Name] = videoRes.list[0];
							}else{
								uploadStatus = false;
								this.$api.msg('第'+(itemIndex+1)+'个内容项，第'+(i+1)+'个视频上传失败');
								break;
							}
						}
					}
					uni.hideLoading();
				}
				return uploadStatus;
			},
			async uploadImgList(imageList,itemIndex){
				imageList = imageList?imageList:[];
				var uploadStatus = true;
				if(imageList.length > 0)
				{
					var newIamgeArr = [];
					for(var i=0;i<imageList.length;i++)
					{
						var md5Name = this.$api.getMd5Name(imageList[i],false);
						if(!this.uploadFileListLog[md5Name])
						{
							//上传图片
							var imgRes = await Upload.uploadImageToQiniuH5([
								{
									path:imageList[i]
								}
							],0)
							if(imgRes.list && imgRes.list.length > 0)
							{
								this.uploadFileListLog[md5Name] = imgRes.list[0];
							}else{
								uploadStatus = false;
								this.$api.msg('第'+(itemIndex+1)+'个内容项，第'+(i+1)+'张照片上传失败');
								break;
							}
						}
					}
					uni.hideLoading();
				}
				return uploadStatus;
			},
			//获取预览内容
			getPreviewContent()
			{
				let dataList = this.dataList;
				return JSON.parse(JSON.stringify(dataList));
			},
		}
	}
</script>

<style lang="scss">
	.border-null{
		border:none !important;
	}
	.b-form-list{
		background: #FFFFFF;
		.add-button-list{
			padding: 0 20rpx;
			border-bottom: 2rpx solid #eee;
			padding-bottom: 10rpx;
			.address{
				.address-tip{
					color: #5996f1;
					padding-bottom: 20rpx;
					font-size: 28rpx;
				}
			}
			.audio{
				.audio-tip{
					font-size: 24rpx;
					background: #728DB5;
					height: 60rpx;
					line-height: 60rpx;
					color: #ffffff;
					font-weight: normal;
					text-align: center;
					border-radius: 15rpx;
					margin-bottom: 20rpx;
				}
			}
			.textarea{
				padding: 10rpx;
				border: 2rpx solid #eee;
				.in-textarea{
					width: 100%;
					height: 200rpx;
					font-size: 28rpx;
				}
			}
			.big_image{
				.bigimage-src{
					width: 100%;
					
				}
			}
			.video{
				.myVideo{
					width: 100%;
					height: 400rpx;
				}
			}
			.top-title{
				height: 80rpx;
				.left{
					width: 45%;
				}
				.ope-list-right{
					width: 55%;
					//display: flex;
					.right-sel{
						min-width: 60rpx;
						border: 2rpx solid #ADADAF;
						text-align: center;
						color: #79797A;
						font-size: 22rpx;
						margin-right: 6rpx;
						height: 40rpx;
						line-height: 40rpx;
						border-radius: 10rpx;
						float: right;
						padding: 0 10rpx;
					}
				}
			}
		}
	}
	.sel-button{
		background: #FFFFFF;
		padding: 10rpx 20rpx;
		.button-list{
			width: 16.6666%;
			.iconfont{
				
			}
			.text-title{
				height: 50rpx;
				line-height: 50rpx;
				font-size: 26rpx;
			}
		}
	}
	.sel-form{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 101;
		.iconfont-close{
			position: absolute;
			bottom: 850rpx;
			font-size: 60rpx;
			color: #ffffff;
			z-index: 101;
			right: 40rpx;
		}
		.shuxian{
			width: 2px;
			height: 36rpx;
			background-color: #FFFFFF;
			position: absolute;
			right: 68rpx;
			bottom: 820rpx;
			z-index: 101;
		}
		.diy-form{
			position: absolute;
			left: 0;
			bottom: 0;
			background-color: #eeeeee;
			height: 820rpx;
			    border-radius: 20rpx 20rpx 0 0;
			z-index: 101; 
			width: 100%;
			.scroll{
				height:100%;
				.scroll-view{
					height: 650rpx;
					margin-bottom: 50rpx;
					.item-parent{
						padding: 10rpx 20rpx;
						background: #ffffff;
						margin-bottom: 20rpx;
						height: 110rpx;
						width: 94%;
						margin-left: 3%;
						border-radius: 20rpx;
						.item-parent-title{
							width: 100%;
							height: 56rpx;
							line-height: 56rpx;
						}
						.item-parent-desc{
							    color: #999;
							    font-size: 24rpx;
						}
					}
				}
			}
			.title{
				height: 120rpx;
				line-height: 120rpx;
				text-align: center;
				font-size: 30rpx;
				background: #eeeeee;
				    border-radius: 20rpx 20rpx 0 0;
			}
			
		}
	}
</style>
